<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>dataTables-bootstrap4</title>
    <link href="./lib/DataTables-1.10.21/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
    <link href="./lib/DataTables-1.10.21/css/dataTables.bootstrap4.min.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
      th,
      td {
        white-space: nowrap;
      }

      div.dataTables_wrapper {
        width: 100%;
        margin: 0 auto;
      }

      div.dataTables_wrapper .dataTables_scroll .dataTables_scrollBody {
        min-height: 410px;
      }
    </style>
  </head>
  <body>
    <form>
      <div>
        <label>姓名：</label>
        <input id="searchName" type="text" placeholder="请输入姓名..." />
        <button type="button" onclick="loadList()">查询</button>
        <button type="button" onclick="querySelect()">选中的行</button>
        <button type="button" onclick="showId()">隐藏列显示</button>
        <button type="button" onclick="updateTitle()">修改标题</button>
      </div>
    </form>
    <table class="table table-striped table-bordered" width="100%" id="tblUser">
      <tbody></tbody>
      <tfoot>
        <tr>
          <th colspan="5" style="text-align: right;">合计年龄:</th>
          <th></th>
          <th colspan="2"></th>
        </tr>
      </tfoot>
    </table>

    <script src="./lib/jquery.min.js"></script>
    <script src="./lib/DataTables-1.10.21/js/jquery.dataTables.min.js"></script>
    <script src="./lib/DataTables-1.10.21/js/dataTables.bootstrap4.min.js"></script>
    <script type="text/javascript">
      $(function () {
        loadList()
      })

      //加载数据
      function loadList() {
        //ajax请求产参数
        var ajaxData = {
          name: $('#searchName').val(),
        }

        if ($('#tblUser tbody').html() != '') {
          //非初始化初始化
          var t = $('#tblUser').dataTable()
          t.fnSettings().ajax.data = ajaxData
          //判断请求参数是否变化
          if (JSON.stringify(t.fnSettings().ajax.data) != JSON.stringify(ajaxData)) {
            //跑回第一页
            t.fnSettings().ajax.data = ajaxData
            t.api().ajax.reload()
          } else {
            //保留当前页
            t.api().ajax.reload(null, false)
          }
          $('#tblUserCheckBox').removeAttr('checked')

          return
        }
        //初始化表格，更多配置http://datatables.club/reference/option/
        //需要 ajax 请求本地 json 数据的，使用 vscode 安装插件 Live Server，index.html 直接右键点击 使用 LiveServer 打开
        var oHeight = 400 //多余的长度
        $('#tblUser').DataTable({
          autoWidth: true, //自动宽度
          scrollX: true, //出现水平滚动条
          scrollY: 'calc(100vh - ' + oHeight + 'px)', //高度设置
          searching: false, //是否显示搜索
          paging: true, //翻页功能
          sort: false, //排序功能
          lengthChange: true, //是否允许显示一页展示多少条记录的下拉列表
          aLengthMenu: [10, 25, 50, 100], //设置每页显示条数
          info: true, //控制总数信息(标准界面右下角显示总数和过滤条数的控件)的显隐
          destroy: true, //初始化销毁原来匹配的表格
          language: {
            url: './lib/DataTables-1.10.21/Chinese.txt',
          }, //语言设置
          processing: true, //数据加载时出现的提示
          serverSide: true, //服务器获取数据
          ajax: {
            type: 'GET',
            url: './data/data.json',
            dataSrc: 'data',
            data: ajaxData,
          },
          columns: [
            { data: 'id', title: '隐藏的数据', visible: false },
            {
              data: 'id',
              title: '<input type="checkbox" id="tblUserCheckBox" onclick="selectAllCheckBox(this, \'tblUser\');">',
              className: 'text-center',
              render: function (data, type, row) {
                var checkedStr = ''
                if (row.IsSelect) {
                  checkedStr = 'checked'
                }
                return "<input type='checkbox' " + checkedStr + ' onclick=\'selectCheckBox(this,"tblUser","tblUserCheckBox")\' />'
              },
            },
            {
              data: 'id',
              title: '操作',
              className: 'text-center',
              render: function (data, type, row) {
                return '<a href="javascript:void(0)" onclick="showRow(this)">查看</a>' + ' <a href="javascript:void(0)" onclick="delRow(this)">删除</a>'
              },
            },
            {
              data: 'name',
              title: '姓名',
              render: function (data, type, row) {
                return (
                  '<input type="text" class="form-control" style="width:150px;" ' +
                  'value="' +
                  row.name +
                  '" onfocus="$(this).select();" ' +
                  "onblur=\"$('#tblUser').DataTable().row($(this).parents('tr')).data().name=$(this).val();\" />"
                )
              },
            },
            { data: 'birthday', title: '出生日期', className: 'text-center' },
            { data: 'age', title: '年龄', className: 'text-center' },
            {
              data: 'sex',
              title: '性别',
              className: 'text-center',
              render: function (data, type, row) {
                return data ? '男' : '女'
              },
            },
            { data: 'address', name: 'address', title: '地址' },
          ],
		  initComplete: function (settings, json) {
			//初始加载完成后
		  },
          rowCallback: function (row, data, index) {
            //行渲染
            if (!data.num % 2 == 0) {
              $(row).css('background-color', 'red') //行颜色变化
            }
            $('td', row).eq(1).css('font-weight', 'bold').css('color', 'blue') //列变色
          },
          drawCallback: function (oSettings, json) {
            //渲染完成后
            console.log('渲染完成后！')
          },
          footerCallback: function (row, data, start, end, display) {
            //添加合计数量
            var totalNum = 0
            for (var i = 0; i < data.length; i++) {
              totalNum += data[i].age
            }
            row.cells[1].innerHTML = totalNum
          },
        })
      }

      //列表选择
      function selectCheckBox(e, id, checkAllId) {
        var t = $('#' + id).DataTable()
        var row = t.row($(e).parents('tr')) //获取当前行对象
        var data = row.data() //获取行数据
        data.IsSelect = data.IsSelect ? false : true //修改行数据
        var index = row.index() //获取下标
        t.row(index).data(data) //根据下标，替换数据。
        //刷新选择所有选择框
        var selectNum = 0
        var dataArr = t.data()
        for (var i = 0; i < dataArr.length; i++) {
          if (dataArr[i].IsSelect) {
            selectNum++
          }
        }
        if (selectNum == dataArr.length) {
          $('#' + checkAllId).prop('checked', 'checked')
        } else {
          $('#' + checkAllId).removeAttr('checked')
        }
      }

      //列表全选
      function selectAllCheckBox(e, id) {
        var isCheck = $(e).prop('checked')
        var t = $('#' + id).DataTable()
        var dataArr = t.data()
        for (var i = 0; i < dataArr.length; i++) {
          if (dataArr[i].IsSelect != isCheck) {
            dataArr[i].IsSelect = isCheck
            t.row(i).data(dataArr[i]) //根据下标，替换数据。
          }
        }
      }

      //查询选中的id
      function querySelect() {
        var t = $('#tblUser').DataTable()
        var dataArr = t.data()
        var str = ''
        for (var i = 0; i < dataArr.length; i++) {
          if (dataArr[i].IsSelect) {
            str += dataArr[i].id + ','
          }
        }
        alert(str)
      }

      //查看
      function showRow(e) {
        var t = $('#tblUser').DataTable()
        var rowData = t.row($(e).parents('tr')).data() //获取行数据
        alert(JSON.stringify(rowData))
      }

      //删除行
      function delRow(e) {
        var t = $('#tblUser').DataTable()
        var row = t.row($(e).parents('tr')) //获取当前行对象
        row.remove().draw(false) //删除确认行,false分页为当前页
        //draw重新渲染会重新请求ajax
      }

      function showId() {
        var t = $('#tblUser').DataTable()
        var column = table.column(0)
        column.visible(true)
      }
      
      function updateTitle() {
        var t = $('#tblUser').DataTable()
        $(t.column("address:name").header()).text("住址");
      }
    </script>
  </body>
</html>
